<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>推理服务管理</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#6B7280'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
}
}
}
}
</script>
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 4px; }
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200">
<div class="text-2xl font-['Pacifico'] text-primary">logo</div>
</div>
<nav class="flex-1 overflow-y-auto custom-scrollbar">
<div class="p-2 space-y-1">
<div class="group">
<div class="flex items-center px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-button">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-dashboard-line"></i>
</div>
<span>模型管理</span>
<i class="ri-arrow-down-s-line ml-auto"></i>
</div>
<div class="ml-6 mt-1 space-y-1">
<div class="flex items-center px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-button">
<span>模型生命周期</span>
</div>
<div class="flex items-center px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-button">
<span>模型运行统计</span>
</div>
<div class="flex items-center px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-button">
<span>模型预测结果</span>
</div>
</div>
</div>
<div class="group">
<div class="flex items-center px-3 py-2 text-sm text-primary bg-blue-50 rounded-button">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-settings-line"></i>
</div>
<span>推理服务</span>
</div>
</div>
<div class="group">
<div class="flex items-center px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-button">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-api-line"></i>
</div>
<span>API 接口</span>
<i class="ri-arrow-down-s-line ml-auto"></i>
</div>
</div>
<div class="group">
<div class="flex items-center px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 rounded-button">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-database-2-line"></i>
</div>
<span>数据处理</span>
<i class="ri-arrow-down-s-line ml-auto"></i>
</div>
</div>
</div>
</nav>
</aside>
<main class="flex-1 flex flex-col overflow-hidden">
<header class="h-14 bg-white border-b border-gray-200">
<div class="h-full max-w-screen-2xl mx-auto px-6 flex items-center justify-between">
<div class="flex items-center gap-8">
<h1 class="text-lg font-medium">推理服务管理</h1>
</div>
<div class="flex items-center gap-6">
<div class="w-8 h-8 flex items-center justify-center">
<i class="ri-notification-line text-gray-600"></i>
</div>
<div class="w-8 h-8 flex items-center justify-center">
<i class="ri-settings-line text-gray-600"></i>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
<i class="ri-user-line text-gray-600"></i>
</div>
<span class="text-sm text-gray-600">陈思远</span>
</div>
</div>
</div>
</header>
<div class="px-6 py-4 bg-white border-b border-gray-200 flex justify-end">
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/3f2bd18b-55e5-45fa-a0ee-46231d5ab797" data-readdy="true">
<button class="flex items-center px-4 py-2 bg-primary text-white rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap">
<i class="ri-add-line mr-1"></i>
创建服务
</button>
</a>
</div>
<div class="flex-1 overflow-auto p-6">
<div class="grid grid-cols-2 gap-6 mb-6">
<div class="relative bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
<i class="ri-flashlight-line text-2xl text-blue-600"></i>
</div>
<div>
<div class="text-xl font-medium flex items-center gap-2">
< 50ms
</div>
<div class="text-lg">实时推理服务</div>
</div>
</div>
<p class="text-gray-600 mb-8">提供低延迟、高并发的实时推理能力，支持毫秒级响应，满足实时的业务需求。</p>
<div class="flex items-center gap-2 mb-2">
<div class="text-sm">开发: 1,247</div>
<div class="text-sm">成功率: 99.8%</div>
</div>
<div class="flex items-center gap-2">
<div class="text-sm">认为好: 89 已答</div>
<div class="text-sm">处理中: 12</div>
</div>
<div class="absolute bottom-6 right-6">
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/307dbd00-2643-4646-8753-84258eaaee82" data-readdy="true">
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors whitespace-nowrap !rounded-button">立即使用</button>
</a>
</div>
</div>
<div class="relative bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center">
<i class="ri-database-2-line text-2xl text-green-600"></i>
</div>
<div>
<div class="text-xl font-medium flex items-center gap-2">
10k+
</div>
<div class="text-lg">批量推理服务</div>
</div>
</div>
<p class="text-gray-600 mb-8">支持大规模数据的高吞吐批量处理能力，优化资源利用与处理效率。</p>
<div class="absolute bottom-6 right-6">
<button class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-green-700 transition-colors whitespace-nowrap !rounded-button">创建任务</button>
</div>
</div>
<div class="relative bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-lg bg-orange-100 flex items-center justify-center">
<i class="ri-speed-up-line text-2xl text-orange-600"></i>
</div>
<div>
<div class="text-xl font-medium flex items-center gap-2">
3.2x
</div>
<div class="text-lg">推理加速优化</div>
</div>
</div>
<p class="text-gray-600 mb-4">通过模型量化、算子融合、内存优化等技术手段，对推理过程进行深度优化。</p>
<div class="space-y-2 mb-4">
<div class="flex items-center justify-between">
<span class="text-sm">模型量化</span>
<span class="text-sm">已启用</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm">算子融合</span>
<span class="text-sm text-orange-600">92% 优化</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm">内存优化</span>
<span class="text-sm text-red-600">-45%</span>
</div>
</div>
<div class="absolute bottom-6 right-6">
<button class="bg-orange-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-orange-700 transition-colors whitespace-nowrap !rounded-button">优化配置</button>
</div>
</div>
<div class="relative bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
<i class="ri-node-tree text-2xl text-purple-600"></i>
</div>
<div>
<div class="text-xl font-medium flex items-center gap-2">
5
</div>
<div class="text-lg">多模型串联推理</div>
</div>
</div>
<p class="text-gray-600 mb-4">支持多个 AI 模型的灵活组合与串联调用，构建复杂的推理流水线。</p>
<div class="flex items-center gap-3 mb-4">
<div class="text-sm">NLP → 图像识别 → 语音合成</div>
</div>
<div class="flex items-center gap-4">
<div class="text-sm">串次数: 5 个</div>
<div class="text-sm">模型: 15 个</div>
</div>
<div class="absolute bottom-6 right-6">
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/21311e05-d26e-433d-aac7-fa877e02a0ba" data-readdy="true">
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-purple-700 transition-colors whitespace-nowrap !rounded-button">构建流水线</button>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<h3 class="text-lg font-medium">推理性能趋势</h3>
<div class="flex gap-2">
<button class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-600">24h</button>
<button class="px-2 py-1 text-xs rounded-full text-gray-600">7d</button>
<button class="px-2 py-1 text-xs rounded-full text-gray-600">30d</button>
</div>
</div>
</div>
<div id="performanceChart" style="width: 100%; height: 300px;"></div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium">服务状态</h3>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span>实时推理</span>
</div>
<span class="text-green-500">正常</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span>批量推理</span>
</div>
<span class="text-green-500">正常</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
<span>推理优化</span>
</div>
<span class="text-yellow-500">优化中</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span>模型运算</span>
</div>
<span class="text-green-500">正常</span>
</div>
</div>
<div class="mt-6">
<div class="text-sm text-gray-500 mb-2">今日处理量</div>
<div id="processingChart" style="width: 100%; height: 100px;"></div>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="text-sm text-gray-500 mb-2">运行中服务</div>
<div class="flex items-end">
<span class="text-2xl font-medium">28</span>
<span class="text-green-500 text-sm ml-2">
<i class="ri-arrow-up-line"></i>
77.8%
</span>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="text-sm text-gray-500 mb-2">异常服务</div>
<div class="flex items-end">
<span class="text-2xl font-medium">3</span>
<span class="text-red-500 text-sm ml-2">
<i class="ri-arrow-up-line"></i>
1%
</span>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="text-sm text-gray-500 mb-2">平均响应时间</div>
<div class="flex items-end">
<span class="text-2xl font-medium">28ms</span>
<span class="text-green-500 text-sm ml-2">
<i class="ri-arrow-down-line"></i>
12.5%
</span>
</div>
</div>
</div>
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">服务名称</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">QPS</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">响应时间</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center bg-blue-100 rounded-lg mr-3">
<i class="ri-cpu-line text-blue-600"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">图像识别服务 v2.3.6</div>
<div class="text-sm text-gray-500">ID: srv_8a7b9c</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800">运行中</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">245.6</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25ms</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-12</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-primary hover:text-blue-700 mr-3 whitespace-nowrap">查看详情</button>
<button class="text-gray-600 hover:text-gray-900 whitespace-nowrap">更多</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="grid grid-cols-2 gap-6 mt-6">
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<h3 class="text-lg font-medium">推理性能趋势</h3>
<div class="flex gap-2">
<button class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-600">24h</button>
<button class="px-2 py-1 text-xs rounded-full text-gray-600">7d</button>
<button class="px-2 py-1 text-xs rounded-full text-gray-600">30d</button>
</div>
</div>
</div>
<div id="performanceChart" style="width: 100%; height: 300px;"></div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium">服务状态</h3>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span>实时推理</span>
</div>
<span class="text-green-500">正常</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span>批量推理</span>
</div>
<span class="text-green-500">正常</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
<span>推理优化</span>
</div>
<span class="text-yellow-500">优化中</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span>模型运算</span>
</div>
<span class="text-green-500">正常</span>
</div>
</div>
<div class="mt-6">
<div class="text-sm text-gray-500 mb-2">今日处理量</div>
<div id="processingChart" style="width: 100%; height: 100px;"></div>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const performanceChart = echarts.init(document.getElementById('performanceChart'));
const processingChart = echarts.init(document.getElementById('processingChart'));
const performanceOption = {
animation: false,
grid: {
top: 10,
right: 10,
bottom: 20,
left: 40
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderColor: '#eee',
borderWidth: 1,
textStyle: {
color: '#1f2937'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
},
axisLabel: {
color: '#6b7280'
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e5e7eb'
}
},
axisLabel: {
color: '#6b7280'
}
},
series: [
{
name: '响应时间',
type: 'line',
smooth: true,
symbol: 'none',
data: [1200, 1300, 1100, 1400, 1200, 1300, 1400],
lineStyle: {
color: 'rgba(87, 181, 231, 1)'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(87, 181, 231, 0.1)'
}, {
offset: 1,
color: 'rgba(87, 181, 231, 0.01)'
}]
}
}
}
]
};
const processingOption = {
animation: false,
grid: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
xAxis: {
type: 'category',
boundaryGap: false,
show: false,
data: Array.from({length: 24}, (_, i) => i)
},
yAxis: {
type: 'value',
show: false
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320, 1250, 1100, 1400, 1350, 1250, 1300, 1150, 1100, 1050, 1200, 1150, 1100, 1000, 950, 900, 850, 800],
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: 'rgba(141, 211, 199, 1)'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(141, 211, 199, 0.1)'
}, {
offset: 1,
color: 'rgba(141, 211, 199, 0.01)'
}]
}
}
}]
};
performanceChart.setOption(performanceOption);
processingChart.setOption(processingOption);
window.addEventListener('resize', function() {
performanceChart.resize();
processingChart.resize();
});
});
</script>
</body>
</html>